<template>
        <div class="dataWash">
            <div class="thumbnail" v-show="showOrHiddenThumbnail">
                  <el-tabs v-model="activeName" class="demo-tabs" stretch='true' @tab-click="handleClick">
             <el-tab-pane label="未标注" name="first"  style="padding:0 20px">
             <div class="contents" v-for="(item,index) in noMarkImg" :key="index">
                 <img :src="item.path" alt="" @click="goIdImg(item.imageId)">
                <el-checkbox v-model="item.checkbox" size="large"/>
             </div>
             <el-pagination layout="prev, pager, next" :total="noTotal" :page-size='pageSize'  :current-page='pageNum' @current-change='currentChange' style="display: flex;justify-content: center;"/>
         </el-tab-pane>
          <el-tab-pane label="已标注" name="second"  style="padding:0 20px">
             <div class="contents" v-for="(item,index) in MarkImg" :key="index">
                 <img :src="item.path" alt="" @click="goIdImg(item.imageId)">
                <el-checkbox v-model="item.checkbox" size="large"/>
             </div>
             <el-pagination layout="prev, pager, next" :total="total" :page-size='pageSize'  :current-page='pageNum' @current-change='currentChange' style="display: flex;justify-content: center;"/>
         </el-tab-pane>
  </el-tabs>
            </div>
        <div class="content" :style="{width:showOrHiddenThumbnail?'70%':'90%'}">
              <img  @click="clickIcon('up')" class="icon iconLeft" src="@/assets/washImg/左翻.png" alt="">
             <img  @click="clickIcon('down')" class="icon iconRight" src="@/assets/washImg/右翻.png" alt="">

               <div class="img" :id="'imgBox'+index" :ref="`imgBox`"  v-for="(item,index) in records" :key="index" :style="{width:imgSize==1?'100%':(imgSize==4?'45%':'30%'),height:imgSize==1?'100%':(imgSize==4?'45%':'30%'),marginTop:imgSize==1?'0':'20px'}">
                    <div style="  overflow: auto;;width:100%;height:100%">
                          <img :src="`${imageApis}/${item.photoListId}/raw/${item.name}`" :id="'scaleImg'+index" ref="scaleImg" alt="" >
                           <el-checkbox  size="large" class="checkbox" v-show="imgSize!==1" v-model="item.checkbox"  @change="changeVal"/>

                    </div>
           </div>
           <Progress :value="value" :finish='finish' :imgTotal='imgTotal' v-show="records.length!=0" @click="showOrHiddenThumbnail=!showOrHiddenThumbnail"/>
        </div>
    
        <div class="checkImg">
           <div class="option">
                <img src="@/assets/washImg/24gf-pictures.png" @click="imgSizeChange(1)" alt="">
                <span>逐页查看</span>
           </div>
           <div class="option">
                <img src="@/assets/washImg/九宫格(1).png" @click="imgSizeChange(4)" alt="">
                <span>四宫格查看</span>
           </div>
           <div class="option">
                <img src="@/assets/washImg/九宫格.png" @click="imgSizeChange(9)" alt="">
                <span>九宫格查看</span>
           </div>
           <div class="option" @click="choice">
                <img src="@/assets/washImg/多选.png" alt="">
                <!-- <img src="@/assets/washImg/多选-选中.png" alt=""> -->
                <span>全选</span>
           </div>
        </div>
        <el-pagination
 v-show="false"
 :page-size='imgSize'
 :current-page='imgNum'
 @size-change="imgSizeChange"
 @current-change="imgNumChange"
  layout="prev, pager, next"
  :total="imgTotal">
</el-pagination>

              <el-dialog
    v-model="dialogVisibleDel"
    title="提示"
    width="30%"
     :before-close="delClose"
  >
    <span style="font-weight: 600;">确认是否要删除</span>
    <template #footer>
      <span>
        <el-button @click="delClose">取消</el-button>
        <el-button type="primary" @click="delImg">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
        </div>
</template>
<script lang="ts">
import {artificialMark} from '@/apis/artificialMark/index'
import {dataWash} from "@/apis/dataWash/index"
import { imageApis,RequestCode } from '@/server/base'
import Progress from "@/views/artificialMark/progress.vue"
import { it } from 'element-plus/es/locale'
export default {
    name:'DataWash',
    components:{
        Progress
    },
    data(){
        return {
            imageApis:imageApis,
             url:'http://172.16.23.238:80/',//图片路径前置地址
            currentId:0 as number,
            imgList:[] as any[],
            activeName:'first' as string,
            imgSize:1,
            imgNum:1,
            imgTotal:0,
            noTotal:0,
            total:0,
            pageNum:1,
            pageSize:5,
            showOrHiddenThumbnail:false,
            dialogVisibleDel:false,
            operateArr:[] as any[],
            imgMag:{}, //图片信息
            records:[],//九宫格图
            abbreviateImg:[],
            finish:0,//已标注的图片数量
            noMarkImg:[]as any,//未标注
            MarkImg:[] as any,

            deleteId:[] as any[],   //删除的id数组

            // photoListId:'' // 数据集id
            scaleProportion:1,
            
        }
    },
    computed:{
     operate(){
             return (this as any).$store.state.operate.operateAction
         },
    },
  watch:{
      operate(val){
        if(val=='删除'){ 
            this.dialogVisibleDel=true
        }else if(val=='撤销'){
            this.cancel()
        }
      },
      showOrHiddenThumbnail(val){
          if(val){
              this.getAbbreviateImg()
          }
      }
    },
    created(){
       this.getimage()
    },
        mounted(){
        },
    methods:{

 
        getImgWidth(){
              let that:any=this
                    let imgBox :any=document.getElementById('imgBox0');
                       that.records.forEach((item:any,index:number)=>{
                             let scaleImg :any =document.getElementById('scaleImg'+index);
                            if(item.imageHeight>item.imageWidth){
                        this.scaleProportion=Number((imgBox?.scrollHeight /item.imageHeight).toFixed(2));
                           if(item.imageHeight>imgBox.scrollHeight){
                       scaleImg.height=item.imageHeight *  this.scaleProportion
                }else{
                       scaleImg.width=item.imageWidth
                       scaleImg.height=item.imageHeight
                     
                }
                }else{
                          this.scaleProportion=Number((imgBox?.scrollWidth /item.imageWidth).toFixed(2));
                         if(item.imageWidth>imgBox.scrollWidth){
                       scaleImg.width=item.imageWidth *  this.scaleProportion
                }else{
                       scaleImg.width=item.imageWidth
                       scaleImg.height=item.imageHeight 
                }
                }
                       })
        },

        //撤销
        cancel(){
        this.operateArr.forEach((item:any)=>{
            if(item.operate=='删除'){
               this.deleteId.splice(this.deleteId.length-1,1)
                this.getimage()
            }
        }) 
        },
        //存储删除操作
            saveOperate(value:any){
             if(this.operateArr.length<3){
                 this.operateArr.push(value)
             }else{  
                this.operateArr.splice(0,1)
                 this.operateArr.push(value)      
             }
         },
         changeVal(val:any){
             console.log(val)
         },
        //获取九宫格和四宫格图片
        getimage(){
            let data={
                current:this.imgNum,
                size:this.imgSize,
                type:2
            };
            dataWash.queryImage(data).then((res:RequestCode)=>{
                let idList :any=[]
                this.deleteId.forEach((item:any)=>{
                    item.id.forEach((items:any)=>{
                        idList.push(items)
                    })
                })
                   idList.forEach((item:number)=>{
                       for(let i=0;i<res.data.page.records.length;i++){
                           if(item==res.data.page.records[i].id){
                               res.data.page.records.splice(i,1)
                               i--
                           }
                       }
                   })
                   this.imgTotal=res.data.page.total
                   this.records=res.data.page.records
                   this.finish=res.data.finish
                   this.records?.forEach((item:any)=>{
                     item.checkbox=true
                   })
                 this.$nextTick(()=>{
               setTimeout(() => {
                    this.getImgWidth()
            }, 500);
          
       })
            })  
        },
        //获取缩略图
        getAbbreviateImg(){
            this.noMarkImg=[]
            this.MarkImg=[]
            let noMark:any=[]
            let mark :any=[]
            artificialMark.getUserSimp(2).then((res:RequestCode)=>{
                     res.data.forEach((item:any)=>{
                   if(item.state==0){
                       noMark.push(item)
                   }else{
                      mark.push(item)
                   }
               })
                this.noTotal=noMark.length
                this.total=mark.length
               this.noMarkImg=noMark.slice((this.pageNum-1)*this.pageSize,(this.pageNum-1)*this.pageSize+this.pageSize)
                this.MarkImg=mark.slice((this.pageNum-1)*this.pageSize,(this.pageNum-1)*this.pageSize+this.pageSize)
                this.noMarkImg.forEach((item:any)=>{
                    item.checkbox=true
                })
                  this.MarkImg.forEach((item:any)=>{
                    item.checkbox=true
                })
            })
        },
        goIdImg(id:number){
              let data={
                current:1,
                size:99999,
                type:2
            };
            dataWash.queryImage(data).then((res:RequestCode)=>{
                    let records=res.data.page.records
                   records?.forEach((item:any,index:number)=>{
                       if(item.id==id){
                           if((index+1)/this.imgSize<1){
                               this.imgNum=1
                           }
                          else if((index+1)%this.imgSize==0){
                               this.imgNum=(index +1)/this.imgSize
                           }else{
                            this.imgNum=((index +1)/this.imgSize )+1  
                           }
                         this.getimage() 
                       }
                   })
            })  
        },
             //左右翻动图片
            clickIcon(val:string){
                if(val==='down'){
					this.imgNum++;
					if(this.imgNum===this.imgTotal +1){
					this.imgNum = 1;
					}
				}else{
				
					if(this.imgNum === 1){
						this.imgNum = this.imgTotal +1;
					}
					this.imgNum--;
				}
                this.getimage()
            },
            //删除图片
            delImg(){
          
                    let params :any=[]
                       let delIdArr :any={}
                    this.records?.forEach((item:any,index:number)=>{
                        if(item.checkbox){
                         params.push(item.id)
                        }
                    })
                        if(this.deleteId.length<3){
                            this.deleteId.push({id:params})
                        }else{
                            delIdArr=this.deleteId.slice(0,1)
                           
                            this.deleteId.splice(0,1)
                            this.deleteId.push({id:params})
                            this.deleteImg(delIdArr.id)
                        }
                        let data={
                            operate:'删除',
                        };
                         (this as any).$message.success('删除成功')
                        this.saveOperate(data)
                         this.getimage();
                   this.dialogVisibleDel=false;
              
            (this as any).$store.commit('operate/editOperate','qww');
            },
           deleteImg(id:number[]){
               dataWash.deleteImg(id).then((res:RequestCode)=>{
                  
               })
           },
            //全选
            choice(){
                this.records.forEach((item:any)=>{
                    item.checkbox=true
                })
            },
            currentChange(val:number){
                this.pageNum=val
                this.getAbbreviateImg()
            },
            imgSizeChange(val:number){
                this.imgSize=val
                  this.getimage()
            },
             imgNumChange(val:number){
                this.imgNum=val
                this.getimage()
            },
              handleClick(tab:any){
                  this.pageNum=1
                  this.getAbbreviateImg()
           console.log(tab.paneName);
      },
           delClose(){
             this.dialogVisibleDel=false;
              (this as any).$store.commit('operate/editOperate','qww') 
             
        },
        Unmountdelete(){
               let idList:number[]=[]
        this.deleteId.forEach((item:any)=>{
            item.id.forEach((items:number)=>{
                idList.push(items)
            })
        });
      this.deleteImg(idList)
        }
    },
    beforeUnmount(){
     this.Unmountdelete()
    }
}
</script>
<style lang="scss" scoped>
.dataWash{
    display: flex;
    height: 100%;
    overflow: auto;
    .thumbnail{
        height: 100%;
        background: #fff;
        margin-right: 20px;
        font-size: 14px;
        overflow-y: auto;
        .contents{
            width: 100px;
            height: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 20px auto 0;
            img{
            display: block;
            width: 100%;
            height: 100%; 
            }
        }
    }
    .content{
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        justify-content: space-between;
               .icon{
        position: absolute;
        top: 50%;
        transform: translate(0,-50%);
        z-index: 20;
        display: block;
        width: 40px;
        height: 40px;
        cursor: pointer;
        }
          .iconRight{
        right: 0;
    }
    .iconLeft{
        left: 0;
    }
         .img{
        position: relative;
        width: 100%;
        height: 750px;
      
        .checkbox{
            position: absolute;
            right: 20px;
            bottom: 0;     
        }

    }
    }
    .checkImg{
        margin-left: 20px;
        width: 120px;
        height: 100%;
        background: #fff;
        display: flex;
        flex-direction: column;
       align-items: center;
       .option{
            cursor: pointer; 
           margin-top: 30px;
           display: flex;
           flex-direction: column;
           align-items: center;
           font-size: 14px;
            img{
            display: block;
            width: 50px;
            height: 50px;
        }
       }
       
    }
   
}

</style>